<template>
    <span>
        <template v-if="action == 'table'  ">
            <div v-html="show"></div>
        </template>
        <template v-if="action == 'edit' || action == 'search' ">
            <el-select
                    style="width:100%"
                    :value="value"
                    v-on="$listeners"
                    filterable
                    class="RemoteSelect"
                    :multiple="multiple"
                    reserve-keyword
                    :loading="loading"
                    :remote="remote"
                    :remote-method="remoteMethod"
                    :placeholder="fieldName">
                <el-option
                        v-for="item in option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>

                <el-option-group v-if="fieldLink.model"
                                 label="请输入关键词获取更多">
                </el-option-group>
            </el-select>

        </template>
    </span>
</template>
<script>
    import base from '../base.js';

    export default {
        extends: base,
        props: {
            fieldLink: {//连表的相关结构
                type: Object,
                default: function () {
                    return {};
                },
            },
            fieldName: {//连表的相关结构
                type: String,
                default: ''
            },
            fieldMulti: [Boolean, String, Number],//是否多选
            fieldOption: {//如果不远程连表的话,这个代表备选数据
                type: Array,
                default: function () {
                    return [];
                },
            },
            fieldKey: String,
        },
        data() {
            return {
                remote: false,
                loading: false,
                multiple: false,
                searchModel:'equal',
                option: [],//远程调用存储数据的地方
            }
        },
        created() {

            this.remote = this.fieldLink ? true : false;
            this.multiple = this.fieldMulti ? true : false;
        },
        mounted() {
            this.$emit('searchModel', this.searchModel);
            this.setOption('all', '全部');
            //查看模式 ,不需要初始化了.编辑模式才需要option
            setTimeout(()=>{
                localStorage.removeItem(this.fieldLink.url)
            },20000);
            if (this.action !== 'table') {
                if (localStorage.getItem(this.fieldLink.url)) {
                    JSON.parse(localStorage.getItem(this.fieldLink.url)).map((value) => {
                        this.setOption(value[this.fieldLink.select[0]], value, this.fieldLink.select);
                    });
                } else {
                    this.remoteMethod();
                }

            }
        },
        watch: {
            data: function (newValue) {
                if (newValue) {
                    this.initOption();
                }
            }
        },
        computed: {
            show() {
                //链表,单选
                let optionName = this.fieldLink.as;
                if (!optionName)
                    optionName = this.fieldKey + '_link';
                if (this.data[optionName]) {
                    let value = this.data[optionName];
                    if (this.fieldLink.select)
                        return value[this.fieldLink.select[1]]
                    else
                        return value;
                }
            }
        },
        methods: {
            initOption() {
                //只有编辑模式不需要option
                if (this.action !== 'edit') {
                    return false;
                }
                //读取link中的数据先填充并选中
                let optionName = this.fieldLink.as;
                if (!optionName)
                    optionName = this.fieldKey + '_link';

                // console.log(optionName);
                // this.$debug.log($)
                if (this.data[optionName]) {
                    let value = this.data[optionName];
                    this.setOption(value[this.fieldLink.select[0]], value, this.fieldLink.select);
                }
            },

            //添加设置option结构
            setOption(key, value, schema) {
                //如果是数字 就改成数字
                if (!isNaN(key))
                    key = key * 1;

                //先检查是否重复了
                let pass = true;
                this.option.forEach((option) => {
                    if (option.value === key) {
                        pass = false;
                    }
                });
                if (!pass) return;//重复了

                //如果schema存在,那就需要读取多个字段的内容
                if (schema) {
                    let tmpValue = '';
                    schema.forEach((v, k) => {
                        if (k > 0 && v && value[v]) {
                            tmpValue += value[v] + ' ';
                        }
                    });
                    value = tmpValue;
                }
                this.option.push({value: key, label: value});
            },
            clearOption() {
                this.option = [];
                this.setOption('all', '全部');
            },

            //远程读取数据,供给下拉
            remoteMethod(query) {
//                if (query !== '') {
                this.loading = true;
                let api = this.fieldLink.url;
                if (!api) {
                    console.log('remoteMethod:路径错误');
                }
                if (query) {
                    //有搜索条件的时候,api拼接
                    let field = this.fieldLink.select.slice(0);
                    let name = field.splice(1).join('|') + '$';
                    let keyword = query;
                    query = {};
                    query[name] = '%' + keyword + '%';
                    api = this.$larfree.httpQuery(query, api);
                    this.clearOption();
                }
                this.$http.get(api)
                    .then((response) => {
                        localStorage.setItem(api, JSON.stringify(response.data.data));
                        response.data.data.map((value) => {
                            this.setOption(value[this.fieldLink.select[0]], value, this.fieldLink.select);
                        });
                        this.loading = false;
//                            this.debug.log(this.option);
                    })
                    .catch((error) => {
                        console.log(error, 'remoteMethod');
                    });
//                }
            }


        }

    }
</script>
<style scoped>
    img {
        width: 50px;
    }

    .el-select {
        width: 220px;
    }
</style>
